<template>
  <div class="game-page">
    <canvas ref="canvas" class="canvas"></canvas>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Game, GameObject, resource, RESOURCE_TYPE } from '@eva/eva.js'
import { RendererSystem } from '@eva/plugin-renderer'
import { Img, ImgSystem } from '@eva/plugin-renderer-img'
import { Text, TextSystem } from '@eva/plugin-renderer-text'
import { StatsSystem } from '@eva/plugin-stats'
import { Event, EventSystem, HIT_AREA_TYPE } from '@eva/plugin-renderer-event'

const canvas = ref<HTMLCanvasElement | undefined>(undefined)

onMounted(() => {
  resource.addResource([
    {
      name: 'bg',
      type: RESOURCE_TYPE.IMAGE,
      src: {
        image: {
          type: 'png',
          url: '//qimg.cdnmama.com/koc/task/2020/04/03222.png?v=1575369329'
        }
      },
      preload: true
    },
    {
      name: 'testImage',
      type: RESOURCE_TYPE.IMAGE,
      src: {
        image: {
          type: 'png',
          url: '//qimg.cdnmama.com/koc/task/2020/04/03222.png'
        }
      },
      preload: true
    }
  ])
  const game = new Game({
    autoStart: true,
    systems: [
      new RendererSystem({
        canvas: canvas.value,
        width: 750,
        height: 1220,
        // transparent: true,
        enableScroll: true // 允许页面滚动
      }),
      new ImgSystem(),
      new TextSystem(),
      new EventSystem()
    ]
  })
  // game.scene.transform.size = {
  //   width: 750,
  //   height: 1220
  // }
  const text = new GameObject('text', {
    size: {
      width: 350,
      height: 350
    },
    position: {
      x: 200,
      y: 200
    },
    origin: {
      x: 0,
      y: 0
    },
    anchor: {
      x: 0,
      y: 0
    }
  })
  text.addComponent(
    new Text({
      text: '测试文字',
      style: {
        fontFamily: 'Arial',
        fontSize: 38,
        fontStyle: 'italic',
        fontWeight: 'bold',
        fill: ['#b35d9e', '#84c35f', '#ebe44f'], // gradient
        fillGradientType: 1,
        fillGradientStops: [0.1, 0.4],
        stroke: '#4a1850',
        strokeThickness: 5,
        dropShadow: true,
        dropShadowColor: '#000000',
        dropShadowBlur: 4,
        dropShadowAngle: Math.PI / 6,
        dropShadowDistance: 6,
        wordWrap: true,
        wordWrapWidth: 400,
        breakWords: true
      }
    })
  )
  const event = text.addComponent(
    new Event({
      hitArea: {
        type: HIT_AREA_TYPE.Polygon,
        style: {
          paths: [
            107, 49, 148, 24, 172, 28, 198, 77, 189, 106, 123, 198, 71, 180, 10, 80, 34, 32, 90, 37
          ]
        }
      }
    })
  )
  event.on('tap', () => {
    console.log('tap1')
  })
  const image = new GameObject('image', {
    size: {
      width: 350,
      height: 350
    },
    position: {
      x: 0,
      y: 0
    },
    origin: {
      x: 0,
      y: 0
    },
    anchor: {
      x: 0,
      y: 0
    }
  })
  const img = new Img({
    resource: 'bg'
  })
  image.addComponent(img)
  const testImage = new GameObject('image', {
    size: {
      width: 750,
      height: 1319
    },
    origin: {
      x: 0,
      y: 0
    },
    anchor: {
      x: 0,
      y: 0
    },
    position: {
      x: 0,
      y: 0
    }
  })
  testImage.addComponent(
    new Img({
      resource: 'testImage'
    })
  )

  game.scene.addChild(image)
  game.scene.addChild(text)
  game.scene.addChild(testImage)

  const statsSystem = new StatsSystem({
    show: true, // 这里设置是否显示 fps 面板
    style: {
      x: 0, // 这里的数值全部都是屏幕宽度的百分比 单位vw
      y: 0,
      width: 20,
      height: 12
    }
  })

  game.addSystem(statsSystem)
})
</script>

<style lang="scss" scoped>
.canvas {
  width: 100%;
  height: auto;
}
</style>
